<template>
  <div  class="app-container" >
              <div style="display: flex;position: relative"  v-loading="loading">
                <el-aside  style="width: 240px;height: 75vh ;background: #f1f1f1;" >
                  <el-input
                    size="small" placeholder="请输入关键词搜索"
                    suffix-icon="el-icon-search"
                    v-model="queryParams.nickname"
                    clearable @keyup.enter.native="handleQuery"
                    @clear="handleclear">
                  </el-input>

                  <div v-if="accountList.length > 0" @click="clickAccount(item)"  v-for="(item,index) in accountList" :key="index" >
                    <div :class="form.id === item.id ?  'checkAccount' : 'accountSty'" >
                      <div style="position: relative;margin-left: 10px">
                        <img style="width: 35px;height: 35px;border-radius: 50px;margin:5px;" :src="item.headImgUrl">
                        <img style="width: 25px;height: 25px;border-radius: 50px;left: 0px;position:absolute;bottom: 3px;left: 25px" :src="require('@/assets/media/' + item.platformCode + '.png' )">
                      </div>
                      <div style="display: flex;flex-direction: column;">
                        <div style="font-size: 15px;margin-left: 15px">
                          {{item.nickname && item.nickname.length > 6 ? item.nickname.substr(0,6) + '...' : item.nickname }}
                        </div>
                        <div style="font-size: 11px;left: 16px;position: relative;bottom: 15px;">
                          {{ getPlatformData(item.platformCode)['platformName'] }}
                        </div>
                      </div>
                    </div>
                  </div>


                  <div  style="margin-top: 100px" v-if="accountList.length < 1">
                    <el-empty  description="暂无账号数据"></el-empty>
                  </div>


                </el-aside>



                <div style="position: absolute;top: 98%;left: 180px">
                  <pagination
                    v-show="total>0"
                    :total="total"
                    layout="prev, pager, next"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="getList"
                  />
                </div>


<!--                表单-->
            <el-form ref="form" :model="form" :rules="rules" label-width="140px">

              <!--        标签样式-->
              <div style="display: flex;margin-bottom: 30px;margin-top: 20px;margin-left: 30px">
                <div style="width: 5px;height: 15px;background: #7983f3;border-radius: 5px;margin-top: 4px"></div>
                <div style="margin-left: 10px;color: #797979"><b>账号模板配置</b></div>
              </div>



                  <div style="margin-left: 30px;margin-top: 30px">
                    <el-row :gutter="24">
                      <el-col :span="24">
                        <el-form-item label="账号昵称" prop="nickname" >
                          <el-input v-model="form.nickname" style="width: 70%;" :disabled="true" placeholder="账号昵称" />
                          <span style="width: 25%;margin-left: 15px">
                            <el-tag v-if="form.acctType === 1"  >管理员账号</el-tag>
                            <el-tag v-if="form.acctType === 2" type="success">运营者账号</el-tag>
                          </span>
                        </el-form-item>
                      </el-col>
                    </el-row>


                    <el-row :gutter="24">
                      <el-col :span="24">
                        <el-form-item label="所属平台" prop="nickname" >
                          <el-input :value="getPlatformData(form.platformCode)['platformName']" :disabled="true" placeholder="所属平台" />
                        </el-form-item>
                      </el-col>
                    </el-row>


                    <el-row style="width: 600px;" :gutter="24">
                      <el-col :span="24">
                        <el-form-item label="文件夹目录" prop="filePath">
                          <el-input  placeholder="请选择文件夹目录" :disabled="true" style="width: 70%;" v-model="form.filePath"></el-input>
                          <el-button type="primary"  style="margin-left: 10px; width: 25%;" @click="selectDir(2)">
                            选择文件夹
                          </el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row :gutter="24">
                      <el-col :span="24">
                        <el-form-item label="视频描述/标题" prop="nickname" >
                          <el-input v-model="form.description"   placeholder="请输入视频描述/标题" />
                        </el-form-item>
                      </el-col>
                    </el-row>

<!--                    <el-row :gutter="24">-->
<!--                      <el-col :span="24">-->
<!--                        <el-form-item label="扩展链接" prop="nickname" >-->
<!--                          <el-input v-model="form.link"   placeholder="扩展链接" />-->
<!--                        </el-form-item>-->
<!--                      </el-col>-->
<!--                    </el-row>-->

                    <el-row :gutter="24">
                      <el-col :span="24">
                        <el-form-item label="文件名作为标题" prop="isFileTitle">
                          <el-switch v-model="form.isFileTitle" :active-value="1" :inactive-value="0" />
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <div style="position:absolute;bottom: 50px;right: 50px">
                      <el-button type="primary"  @click="submitForm">保存配置</el-button>
                    </div>
                  </div>

                </el-form>


              </div>

<!--            <el-tab-pane label="视频号分组模板" name="second">-->
<!--              <div style="margin: 10px">-->
<!--                敬请期待-->
<!--              </div>-->
<!--            </el-tab-pane>-->

  </div>
</template>

<script>

import { listMediaAccount, getAccount, delAccount, addAccount, updateAccount,savePublishModel } from "@/api/media/mediaAccount";
import { listPublishModelConfig, getPublishModelConfig,  addPublishModelConfig, updatePublishModelConfig } from "@/api/publishModelConfig/publishModelConfig";
import {ipcApiRoute} from "@/api/main";
import {Message} from "element-ui";
import { listPlatform } from "@/api/media/platform";
export default {
  name: "Account",
  data() {
    return {
      loading:false,
      activeName:'first',
      checkAll: false,
      description:'',
      link:'',
      // 表单参数
      form: {
        isFileTitle:0
      },
      // 表单校验
      rules: {
        // userId: [
        //   { required: true, message: "用户id不能为空", trigger: "blur" }
        // ],
        // platform: [
        //   { required: true, message: "平台不能为空", trigger: "blur" }
        // ],
        // logo: [
        //   { required: true, message: "平台logo链接不能为空", trigger: "blur" }
        // ],
      },
      shortTitle:'',
      publishTime:'',
      dir_path:'',
      isIndeterminate: true,
      accountList:[],
      total:0,
      queryParams:{
        pageNum: 1,
        pageSize: 20,
        platformCode:'wxsph'
      },
      platformList:[]
    };
  },
  created() {
    this.getList();
    this.getListPlatform();
  },
  methods: {


    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /**
     * 清空搜索框内容
     */
    handleclear(){
      this.activebg='0'
      this.queryParams={
        pageNum: 1,
        pageSize: 20,
        name: undefined,
        avatar: undefined,
        loginStatus: undefined,
        description:undefined,
        loginFailureReason: undefined,
        platformId: undefined,
        groupId: undefined,
        status: undefined,
        orderNum: undefined
      },
      this.getList();
    },

    /** 查询账号管理列表 */
    getList() {
      this.loading = true;
      listMediaAccount(this.queryParams).then(response => {
        this.accountList = response.rows;
        // if(this.accountList.length > 0){
          this.clickAccount(this.accountList[0])
        // }
        this.total = response.total;
        this.loading = false;
      });
    },





    /**
     * 选择文件夹
     */
    async selectDir(num) {
      let self = this;
      if(num === 1){
        const result =  await  self.serviceInvoke("controller.system.selectFolder",0) //文件上传
        self.form.filePath = result[0]
      }else{
        const result =  await  self.serviceInvoke("controller.system.selectFolder",1)  //文件夹上传
        self.form.filePath = result[0]
      }
    },


    /**
     * 点击菜单
     */
    handleClick(val){
      console.log(val)
    },

    /**
     * 点击账号
     * @param item
     */
    clickAccount(account){
      if(account){
        let data =  Object.assign({},account,account.mediaPublishModelConfig)
        this.form = data
      }
    },


    /** 提交按钮 */
    submitForm: function() {
      let data = this.form;
      //视频发布模板保存
      savePublishModel(data).then((res)=>{
        if(res.code === 200){
          Message.success("模板保存成功！")
          this.getList();
        }
      })
    },

    /**
     * 获取平台列表
     */
    getListPlatform(){
      listPlatform({status : 1}).then(res=>{
        if(res.code === 200){
          console.log(res)
          this.platformList = res.rows
        }else{
          Message.error("平台列表查询失败！");
        }
      })
    },

    /**
     * 根据获取对应平台的编码名称
     */
    getPlatformData(code){
      let platformData = [];
      this.platformList.forEach((item,index)=>{
        if(item.platformCode === code){
          platformData = item;
        }
      })
      return platformData;
    },


  }
};
</script>
<style>

.accountSty{
  display: flex;
  position: relative;
  background: #ffffff;
  border-radius: 5px;
  height: 50px;
  margin-top: 10px;
  cursor: pointer;
}

.checkAccount{
  display: flex;
  position: relative;
  background: #d5d6d7;
  border-radius: 5px;
  height: 50px;
  margin-top: 10px;
  cursor: pointer;
}


.accountSty:hover{
  background: #d5d6d7;
}
</style>
